<template>
<main>
<Hero :title = "title"/>
  <div class="our-cases-area section-padding30">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-6 col-lg-7 col-md-10 col-sm-10">
        </div>
      </div>
      <div class="row">
        <div v-for="(category,index) in categoryList" :key="index" class="col-lg-4 col-md-6 col-sm-6">
          <div class="single-cases mb-40">
            <div class="cases-img">
              <img :src="require('../assets/img/category/category' + index + '.png')" alt="">
            </div>
            <div class="cases-caption">
              <h3><a>{{ category.name }}</a></h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
</template>

<script>
import Hero from "../components/hero"
import {getCategoryList} from "@/api/blog";
export default {
  name: "category",
  components: {
    Hero
  },
  data() {
    return {
      title: '文章分类',
      categoryList:[]
    }
  },
  mounted() {
    this.getCultureList()
  },
  methods: {
    getCategoryList() {
      getCategoryList().then(res => {
        this.categoryList = res.data
      })
    }
  }
}
</script>

<style scoped>
a:hover{
  text-decoration-line: none;
  cursor:pointer
}
</style>
